//webpack的配置文件
const path = require('path')

//使用第一个插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

//清除打包目录的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//css提取插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//导入vue-loader的内容插件
const {VueLoaderPlugin} = require('vue-loader')


//抛出对象commmonjs语法
module.exports = {
 //入口文件
 entry:'./src/main.js',
 //输出配置文件
 output:{
    //打包后文件名字
    filename:"[name].js",
    //指定文件的输出目录结构
    path:path.resolve(__dirname,'dist'),
 },
resolve:{
    //配置别名
    alias:{
       '@':path.resolve(__dirname,'src')
    },
    //配置文件后缀名
    extensions:['.js','.json','.vue','.css']
},
 //配置webpack-dev-server配置
  devServer:{
      // 端口号
      port:8000,
      open:true, //自动打开浏览器
      // proxy:{

      // }
 },

 //loader配置,webpack能够支持更多的模块类型,需要使用loader进行转换
 module:{
      rules:[
         {
            test:/\.css$/i, //配置css结尾的文件
            //从右到左依次执行，先写css-loader，在写style-loader
            //指定具体的loader
            use:[{
               loader:MiniCssExtractPlugin.loader,
                options:{
                  publicPath:'../'
               }
            },'css-loader'],
         },
         //匹配图片,项目中支持图片
         {
            test:/\.(png|jp?g|gif)$/i,
            use:[{
               loader:'file-loader',
               //配置url-loader的选项
               options:{
                  //关闭模块化操作
                  esModule:false,
               }
            }]
         },
         //配置loader支持vue文件
         {
            test:/\.vue$/i,
            loader:'vue-loader'
         },
      ]
 },

 //插件配置
 plugins:[
     new HtmlWebpackPlugin({
        template:'./public/index.html'
     }), //实例化构建
     new CleanWebpackPlugin(),//清除插件

     new MiniCssExtractPlugin({
        filename:'css/[name].css'
     }),
     //实例化 vue-loader插件
     new VueLoaderPlugin(),
 ],      
 //开发环境模式的配置,development   production生产模式代码会进行压缩
 mode:'development',
}